<script setup lang="ts">
import { reactive } from 'vue'
import { watch } from 'vue'
import { ref, computed } from 'vue'

const food = ref('祖传猪脚饭')
const drink = ref('黄振龙凉茶')

// 侦听器
watch(food, () => {
  console.log('天啦撸，猪脚饭不香啦~~')
})

watch([food, drink], () => {
  console.log('猪脚饭+凉茶 很搭哦~~~')
})

const foodObj = reactive({
  name: '张亮麻辣烫',
  price: 15,
  drink: {
    name: '快乐水',
    price: 4
  }
})

// 只监听某个属性的改变（基本类型）
// watch(() => foodObj.price, () => {
//   console.log('涨价啦~~~')
// })

// 参数 1 设置监听的 数据，或者属性
// 参数 2 数据改变之后的回调函数
// 参数 3 一些配置，比如深度监听
watch(
  () => foodObj.drink,
  () => {
    console.log('饮料变啦~~~')
  },
  {
    deep: true, // 深度监听
    immediate: true // 是否默认执行一次
  }
)
</script>

<template>
  <div>
    <h2 @click="food += '🌶'">{{ food }}</h2>
    <h2 @click="drink += '🍊'">{{ drink }}</h2>
    <h2>{{ foodObj }}</h2>
    <button @click="foodObj.name += '!'">改名字</button>
    <button @click="foodObj.price++">改价格</button>
    <button @click="foodObj.drink.price++">快乐水涨价</button>
    <button @click="foodObj.drink.name += '🧊'">快乐水改名</button>
  </div>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
